<template>
  <div>
    <el-card>
      <div slot="header" style="font-size: 20px; font-weight: 600">
        日志管理
      </div>
      <div style="font-size: 16px; margin-bottom: 10px">
        <span style="font-weight: 600">日志管理 </span>
        <i class="el-icon-arrow-right"></i>
        <span
          class="mybreadcrumb"
          style="font-weight: 600"
          @click="$router.push('/loggerManagement')"
          >日志类型
        </span>
        <i class="el-icon-arrow-right"></i>
        <span>日志列表 </span>
      </div>
      <el-table
        :default-sort="{ prop: 'name', order: 'ascending' }"
        :data="tableLoggers"
        v-loading="tableLoading"
        element-loading-text="正在加载日志文件数据..."
      >
        <el-table-column
          width="280px"
          align="center"
          label="日志列表"
          prop="name"
          style="display: flex; justify-content: flex-start"
        >
          <template slot-scope="scope">
            <div style="text-align: center">
              <el-button
                type="text"
                style="
                  width: 100%;
                  margin-left: 90px;
                  display: flex;
                  justify-content: flex-start;
                "
                @click="showLog(scope.$index)"
              >
                <div style="display: flex; align-items: center">
                  <span
                    class="iconfont icon-rizhiguanli"
                    style="font-size: 40px; color: #666666"
                    >&nbsp;</span
                  >
                  <span>{{ scope.row.name }}</span>
                </div>
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="创建日期" prop="date">
          <template slot-scope="scope">
            <div>
              <span>{{ scope.row.date }} </span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
      title="查看日志文件"
      :visible.sync="showDialogVisible"
      width="60%"
      top="1%"
    >
      <el-button
        style="margin-bottom: 20px"
        type="primary"
        icon="el-icon-download"
        @click="downloadLogger()"
        >下载</el-button
      >
      <!-- 合同模板显示区域 -->
      <!-- <div class="showBox" v-html="loggerData" style="height: 80%"> -->
      <!-- <iframe
          src="http://124.221.41.252:8080/smtpmail/log/info/2022-05-18.0.log"
          frameborder="0"
          width="100%"
          height="800px"
        ></iframe> -->
      <!-- {{ loggerData }} -->
      <!-- </div> -->
      <el-input
        :rows="textLen"
        type="textarea"
        v-model="loggerData"
        placeholder=""
      ></el-input>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loggerType: "",
      tableLoading: false,
      loggerList: [],
      tableLoggers: [],
      showDialogVisible: false,
      loggerData: "",
      currentIndex: "",
      textLen: ""
    };
  },
  created() {
    this.loggerType = window.sessionStorage.getItem("loggerType");
    this.loggerList = JSON.parse(window.sessionStorage.getItem("loggers"))[
      this.loggerType
    ];

    this.loggerList.forEach((item, index) => {
      let date = String(item).substring(0, 10);
      this.loggerList[index] = { name: item, date: date };
      // item = {name:item}
      console.log(item);
      // return item
    });
    console.log(this.loggerList);
    this.tableLoggers = this.loggerList;
    // this.getLoggerList();
  },
  methods: {
    async getLoggerList(index) {
      const { data: res } = await this.$http.get(
        `/smtpmail/log/${this.loggerType}/${this.tableLoggers[index].name}`
      );
      let str = String(res);
      console.log(str.includes("\r"));
      //   let strArr = str.split(/[(\r\n)\r\n]+/)
      str.replace(/\r\n/, "<br/>");
      console.log(str);
      console.log("\r\n");

      this.loggerData = str;
      let len = str.split("\n").length;
      if (len > 24) len = 24;
      this.textLen = len;
      if (this.loggerData == "") {
        this.loggerData = "日志信息为空";
      }
    },
    showLog(index) {
      this.currentIndex = index;
      this.showDialogVisible = true;
      this.getLoggerList(index);
    },
    downloadLogger() {
      window.location.href = `http://124.221.41.252:8080/smtpmail/log/${
        this.loggerType
      }/${this.tableLoggers[this.currentIndex].name}`;
    }
  }
};
</script>

<style lang="less" scoped>
.mybreadcrumb:hover {
  cursor: pointer;
  color: #409eff;
}
</style>